import React,{useState,useEffect,useRef} from "react"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit,faTrash,faTimes } from '@fortawesome/free-solid-svg-icons'
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
import PropTypes from 'prop-types';
import useContextMenu from "../hooks/useContextMenu"

import useKeyPress from "../hooks/useKeyPress.js"//使用自定义钩子的做法
import {getParentNode} from "../utils/helper.js"

const {remote} = window.require("electron")
const {Menu,MenuItem} = remote;//import menu

const FileList = ({files,onFileClick,onSaveEdit,onFileDel})=>{
  const [ editStatus, setEditStatus] = useState(false)
  const [ value, setValue] = useState("")

  const enterKey = useKeyPress(13)//必须放在里面，不能放在外面
  const escKey = useKeyPress(27)

  const node = useRef(null)
  const closeSearch = (editItem="",e="")=>{
    // e.preventDefault();
    setValue("")
    setEditStatus(false)
    if(editItem && editItem.isNew){
        //delete editItem's isnew
        onFileDel(editItem.id)
    }
  }

  //add 上下文菜单
  const clickEle = useContextMenu([
    {
      label:"打开",
      click:()=>{

        const parentNode = getParentNode(clickEle.current,"file-item")
        if(parentNode){
           onFileClick(parentNode.dataset.id)
        }
      }
    },
    {
      label:"重命名",
      click:()=>{
        const parentNode = getParentNode(clickEle.current,"file-item")
        if(parentNode){
           setEditStatus(parentNode.dataset.id);setValue(parentNode.dataset.title)
        }
      }
    },
    {
      label:"删除",
      click:()=>{
        const parentNode = getParentNode(clickEle.current,"file-item")
        if(parentNode){
           onFileDel(parentNode.dataset.id)
        }
      }
    }
  ],".file-list")
  // useEffect(()=>{
  //   const menu = new Menu();
  //   menu.append(new MenuItem({
  //     label:"打开",
  //     click:()=>{
  //       console.log("打开测试")
  //     }
  //   }))
  //   menu.append(new MenuItem({
  //     label:"重命名",
  //     click:()=>{
  //       console.log("重命名测试")
  //     }
  //   }))
  //   menu.append(new MenuItem({
  //     label:"删除",
  //     click:()=>{
  //       console.log("删除测试")
  //     }
  //   }))
  //   const handleContextMenu = (e)=>{
  //     // menu.popup({window:remote.getCurrentWindow()})
  //     menu.popup()
  //   }
  //   window.addEventListener('contextmenu',handleContextMenu)
  //   return ()=>{
  //     window.removeEventListener("contextmenu",handleContextMenu)
  //   }
  // })

  useEffect(()=>{
       const editItem = files.find(file=>file.id===editStatus)
       if(enterKey &&  editStatus && value.trim() != ""){
          onSaveEdit(editItem.id,value,editItem.isNew);//保存修改
          setValue("")
          setEditStatus(false)
       }else if(escKey &&  editStatus){
          closeSearch(editItem)
       }
    // const handleInputEvent = (e)=>{
    //    const {keyCode } = e;
    //    if(keyCode ===13 &&  editStatus){
    //       const editItem = files.find(file=>file.id===editStatus)
    //       onSaveEdit(editItem.id,value);//保存修改
    //       setValue("")
    //       setEditStatus(false)
    //    }else if(keyCode ===27 &&  editStatus){
    //       closeSearch(e)
    //    }
    // }
    // document.addEventListener('keyup',handleInputEvent)
    // return ()=>{
    //   document.removeEventListener('keyup',handleInputEvent)
    // }
  })

  useEffect(()=>{
    const newFile = files.find(file=>file.isNew)
    console.log(newFile)
    if(newFile){
      setEditStatus(newFile.id)
      setValue(newFile.title)
    }
  },[files])
  //输入框获取焦点
  // useEffect(()=>{
  //   if(editStatus){
  //     node.current.focus()
  //   }//新建的时候，获取编辑的时候，获取焦点
  // },[editStatus])

  //原先的编辑和删除按钮
  // <button className="col-1 icon-btn py-0 px-3"
  //  type="button"
  //  onClick={()=>{setEditStatus(file.id);setValue(file.title)}}
  //  >
  //     <FontAwesomeIcon icon={faEdit} title="编辑" size="sm"/>
  //  </button>
  //
  //  <button className="col-1 icon-btn py-0 px-3"
  //  type="button"
  //  onClick={()=>{onFileDel(file.id)}}
  //  >
  //     <FontAwesomeIcon icon={faTrash} title="删除" size="sm"/>
  //  </button>
  return (
    <ul className="list-group list-group-flush file-list">
       {
         files.map(file=>(
               <li className="list-group-item d-flex bg-light align-items-center file-item row mx-0 px-1"
               key={file.id}
               data-id = {file.id}
               data-title = {file.title}>
                {
                  (editStatus !== file.id && !file.isNew) &&
                  <>
                        <span className="col-2"><FontAwesomeIcon icon={faMarkdown} title="MD文件" size="lg"/></span>
                        <span className="col-10 c-link"
                        onClick={()=>{onFileClick(file.id)}}
                        >{file.title}</span>
                  </>
                }
                {
                  (editStatus === file.id || file.isNew) &&
                  <>
                    <input className="form-control col-10"
                    value={value}
                    ref={node}
                    placeholder="请输入文件名称"
                    onChange={(e)=>{setValue(e.target.value)}}
                    />
                    <button className="icon-btn col-2"
                    onClick={(e)=>{closeSearch(file,e)}}
                    >
                      <FontAwesomeIcon icon={faTimes} title="关闭" size="lg"/>
                    </button>
                  </>
                }
              </li>
           )
         )
       }
    </ul>
  )
}
FileList.propTypes = {
   files:PropTypes.array,
   onFileClick:PropTypes.func,
   onFileDel:PropTypes.func,
   onSaveEdit:PropTypes.func,
}

export default FileList;
